<template>
    <div>
      <div class="header">
        <el-input placeholder="请输入行政区域名称"></el-input>
        <el-input placeholder="请输入行政区域编码"></el-input>
        <el-button type="primary" icon="el-icon-search">查找</el-button>
        <el-button type="primary" icon="el-icon-download">导出</el-button>
      </div>
      <div class="table">
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column prop="id" label="区域ID" sortable width="100">
          </el-table-column>
          <el-table-column prop="pid" label="区域父ID"> </el-table-column>
          <el-table-column prop="name" label="区域名称" width="434"> </el-table-column>
          <el-table-column prop="type" label="区域类型"> </el-table-column>
          <el-table-column prop="code" label="区域编码"> </el-table-column>
        </el-table>
      </div>
      <div style="padding: 40px 0" class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { getRegionData } from "@/api/mall";
  export default {
    name: "member",
    props: [],
    data() {
      return {
        tableData: [],
        page: 1,
        limit: 20,
        keyword: "",
        userId: "",
        sort: "add_time",
        order: "desc",
        total: 10,
      };
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        let data = {
          page: this.page,
          limit: this.limit,
          keyword: this.keyword,
          userId: this.userId,
          sort: this.sort,
          order: this.order,
        };
        getRegionData(data).then((res) => {
          // console.log(res);
          if (res.errno == 0) {
            this.tableData = res.data.items;
            this.total = res.data.total;
          }
        });
      },
      // 一页多少条数据
      handleSizeChange(e) {
        this.limit = e;
        this.getdata();
      },
      //当前页数
      handleCurrentChange(e) {
        this.page = e;
        this.getdata();
      },
    },
  };
  </script>
  
  <style scoped lang="less">
  .header {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    /deep/.el-input {
      width: 200px;
      margin-left: 15px;
      .el-input__inner {
        width: 200px;
      }
    }
    .el-button {
      margin-left: 15px;
    }
  }
  .table {
    padding: 15px;
    /deep/.cell {
      text-align: center;
      .border {
        display: inline-block;
        padding: 3px 8px;
        border: 1px solid #409efe;
        border-radius: 5px;
        color: #409efe;
        background-color: #e3eefb;
      }
    }
  }
  </style>
  